@import '../../../../assets/styles/variable.scss';

.hidden {
  display: none;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;

  .hint {
    font-weight: bold;
    color: $gray-6;
  }

  .selectedContainer {
    display: flex;

    .selectedBox {
      .outer {
        background-color: $blue-2;

        .desc {
          text-align: center;
          background-color: white;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }
    }

  }
}

@media screen and (min-width: 401px) {
  .container {
    width: 1519px;
    padding: 15px 100px;

    .hint {
      width: 1150px;
      font-size: map-get($map: $navigation, $key: 'hint-font-pc');
      margin: 30px 0;
    }

    .selectedContainer {
      flex-flow: row wrap;
      width: 1150px;
      margin-bottom: 20px;

      .selectedBox {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;

        .outer {
          border-radius: 22px;

          .desc {
            width: 110px;
            padding: 5px;
            margin: 30px 20px;
            border: solid 1px white;
            border-radius: 5px;
            font-size: map-get($map: $navigation, $key: 'step-font-pc');
          }
        }

        .separator {
          width: 70px;
          height: 1px;
          border-top: dashed 1px $gray-5;
          margin: 0 20px;
        }
      }

    }
  }
}

@media screen and (max-width: 400px) {
  .container {
    width: 350px;

    .hint {
      width: 350px;
      font-size: map-get($map: $navigation, $key: 'hint-font-mb');
      margin: 15px 0;
    }

    .selectedContainer {
      flex-flow: column wrap;
      align-items: center;
      width: 350px;
      margin-bottom: 20px;

      .selectedBox {
        display: flex;
        flex-direction: column;
        align-items: center;

        .outer {
          border-radius: 15px;

          .desc {
            width: 280px;
            padding: 5px;
            margin: 10px 30px;
            border: solid 1px white;
            border-radius: 5px;
            font-size: map-get($map: $navigation, $key: 'step-font-mb');
          }
        }

        .separator {
          width: 1px;
          height: 20px;
          border-left: dashed 1px $gray-4;
          margin: 5px 0;
        }
      }

    }
  }
}

